<template>
  <q-page class="row no-wrap" v-if="currentUser">
    <div class="column">
      <page-left-menu
        class="col"
        :title="$t('profile.title')"
        color="#3498DB"
        :menus="menus"
        :currentUser="currentUser"
        @onChange="onMenuChange"
      />
      <div class="column">
        <q-btn
          no-caps
          text-color="sub"
          style="background-color: #1c1c1c"
          dense
          :to="{ name: 'MyContents' }"
          :label="$t('profile.contentMangaer')"
        />
        <q-btn
          class="q-my-md"
          flat
          dense
          text-color="sub"
          label="Report"
          no-caps
        />
      </div>
    </div>

    <div style="width: 100%" class="column">
      <q-scroll-area class="col">
        <div class="banner row">
          <q-img
            width="100%"
            height="100%"
            class="image"
            :src="
              currentUser.banner
                ? currentUser.banner
                : 'images/default-banner.png'
            "
          ></q-img>
          <div class="col" />
          <div class="column justify-around">
            <div class="column items-end">
              <q-btn
                align="right"
                color="primary"
                text-color="accent"
                no-caps
                icon="mdi-pencil"
              >
                <template v-slot:default>
                  <div style="color: #f9f9f9; padding-left: 8px">
                    {{ $t('profile.changeBackground') }}
                  </div>
                </template>
              </q-btn>
              <q-btn
                align="right"
                color="primary"
                no-caps
                text-color="negative"
                icon="mdi-close"
                class="q-mt-xs"
              >
                <template v-slot:default>
                  <div style="color: #f9f9f9; padding-left: 8px">
                    {{ $t('profile.remove') }}
                  </div>
                </template>
              </q-btn>
            </div>
            <div class="row justify-end q-gutter-x-sm">
              <q-btn
                round
                v-for="link in socialLinks"
                :key="link.id"
                :color="link.type"
                :icon="`mdi-${link.type}`"
                :href="link.link"
                target="_blank"
              />
              <q-btn
                round
                icon="mdi-plus"
                text-color="accent"
                color="primary"
                @click="gotoAccountSetting"
              />
            </div>
          </div>
        </div>
        <router-view v-if="currentUser" />
      </q-scroll-area>
    </div>
  </q-page>
</template>
<script setup lang="ts">
import { ref, computed, onBeforeMount } from 'vue';
import { useRouter } from 'vue-router';
import PageLeftMenu from './ProfileViews/ProfilePageLeft.vue';
import { PageLeftItem } from 'layouts/components/PageLeftItem';
import SocialLink from 'src/models/SocialLink';
import { useUserStore } from 'src/stores/user-store';
import { useGlobalStore } from 'src/stores/global-store';
const router = useRouter();
const userStore = useUserStore();
const globalStore = useGlobalStore();
const currentUser = computed(() => userStore.currentUser);
const socialLinks = computed<SocialLink[]>(() => userStore.socialLinks);

const menus = ref<PageLeftItem[]>([
  { label: 'profile.home', routeName: 'ProfileHome' },
  { label: 'profile.uploads', routeName: 'ProfileUploads' },
  { label: 'profile.playlists', routeName: 'ProfilePlaylists' },
  { label: 'profile.about', routeName: 'ProfileAbout' },
]);
async function onMenuChange(info: PageLeftItem) {
  await router.replace({ name: info.routeName });
}
function gotoAccountSetting() {
  globalStore.showSettingDialog = true;
}
onBeforeMount(async () => {
  await userStore.getMySocialLinks();
});
</script>
<style lang="sass" scoped>

.banner
  width: 100%
  height: 205px
  position: relative
  .image
    width: 100%
    height: 100%
    position: absolute
</style>
